import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Dimensions,
    SafeAreaView
} from 'react-native';
import { Slider, Icon } from "react-native-elements"
import Video from 'react-native-video';
import { NavigationContext, useNavigation } from '@react-navigation/native';
const VIDEO_WIDTH = Dimensions.get("screen").width / (16 / 9)
function formatM(time) {
    return `${parseInt(time / 60)}:${parseInt(time % 60)}`
}

export default class VideoPlayer extends Component {
    state = {
        current: null,
        duration: null,
        paused: false,
        fullscreen: false,
    }
    player;
    static contextType = NavigationContext;
   
    onFullScreenBtnClick() {
        alert("未实现")
        // const navigation = this.context;


        // this.setState({
        //     fullscreen: !this.state.fullscreen
        // })
    }
    onPauseBtnClick() {
        this.setState({
            paused: !this.state.paused
        })
    }
    render() {
        const { url } = this.props;
        const { duration, current, paused, fullscreen } = this.state;
        return <View style={styles.container}>
            <SafeAreaView>
                <Video paused={paused} fullscreen={fullscreen} poster={"http://vjs.zencdn.net/v/oceans.png"} source={{ uri: url }}
                    ref={(ref) => {
                        this.player = ref
                    }}
                    onProgress={(res) => {
                        this.setState({
                            current: res.currentTime
                        })
                    }}
                    onLoad={(res) => {
                        this.setState({
                            duration: res.duration
                        })
                    }}
                    style={{
                        height: VIDEO_WIDTH,
                        backgroundColor: '#000'
                    }}></Video>
                <View style={styles.controls}>
                    <TouchableOpacity onPress={this.onPauseBtnClick.bind(this)}>
                        <Icon name={paused ? "play-arrow" : "pause"}></Icon>
                    </TouchableOpacity>

                    <Text> {formatM(current)}</Text>
                    <Slider style={styles.slider} maximumValue={parseInt(duration * 100 || 0)} value={parseInt(current * 100 || 0)} onSlidingComplete={(value) => {
                        this.player.seek(parseInt(value / 100))
                    }}></Slider>
                    <Text>{formatM(duration)}</Text>
                    <TouchableOpacity onPress={this.onFullScreenBtnClick.bind(this)}>
                        <Icon name={"fullscreen"}></Icon>
                    </TouchableOpacity>
                </View>
            </SafeAreaView>
        </View>

    }
}

const styles = StyleSheet.create({
    container: {
        // backgroundColor: '#ff0',
        // flex: 1,
        // position: 'absolute',
        // left: 0,
        // right: 0,
        // top: 0,
        // bottom: 0,
    },
    controls: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    slider: {
        flex: 1,
        marginHorizontal: 5
    }
});